<template>
  <div :class="{'mobile-detail-wrap':showMobilePage}" class="other-info-form mobile-small-padding">
    <SectionTitle title="个人信息" style="margin-bottom: 6px"/>
    <el-form ref="otherInfo" :class="{'mobile-el-form': showMobilePage}" :label-position="showMobilePage?'left':'right'" label-width="8em">
      <el-row :gutter="20" type="flex" class="form-content">
        <el-col v-if="formData.supplierType" :span="8">
          <el-form-item label="纳税人识别号：">
            <ToolTip :content="formData.taxpayerIdentificationNumber" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.supplierType" :span="8">
          <el-form-item label="营业执照：">
            <FileShowList :file-list="formData.license" is-show-single-file @download="handleDownload" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.supplierType" :span="8">
          <el-form-item label="备注：">
            <ToolTip :content="formData.remark" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.supplierType" :span="8">
          <el-form-item label="合作状态：">
            <ToolTip :content="cooperationStatus(formData.cooperationStatus)" />
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="性别：">
            <span>{{ formData.sex === 0 ? '男' : '女' }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="身份证：">
            <FileShowList v-if="isShowPersonal" :file-list="formData.idCard" is-show-single-file />
            <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="身份证号：">
            <ToolTip v-if="isShowPersonal" :content="formData.identityNumber" />
            <sensitiveInfo v-else :params-obj="paramsObj" :format-text="getFormatText(formData.identityNumber)" @setSensitive="setSensitive" />
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="手机号码：">
            <ToolTip v-if="isShowPersonal" :content="formData.phone" />
            <sensitiveInfo v-else :params-obj="paramsObj" :format-text="getFormatText(formData.phone)" @setSensitive="setSensitive" />
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="微信号：">
            <ToolTip v-if="isShowPersonal" :content="formData.wxCode" />
            <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
          </el-form-item>
        </el-col>
        <el-col v-if="formData.supplierType" :span="8">
          <el-form-item label="微信号：">
            <ToolTip v-if="isShowCompany" :content="formData.wxCode" />
            <sensitiveInfo v-else :params-obj="paramsObj" @setSensitive="setSensitive" />
          </el-form-item>
        </el-col>
        <el-col v-if="!formData.supplierType" :span="8">
          <el-form-item label="备注：">
            <ToolTip :content="formData.personRemark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import FileShowList from '@/components/CreateOrder/fileShowList';
import sensitiveInfo from '@/components/SupplierComponent/sensitiveInfo';
import { publishedStatus, cooperationStatus } from '@/filters/status';
export default {
  filters: {
    publishedStatus
  },
  components: {
    FileShowList,
    sensitiveInfo,
    SectionTitle
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {
          supplierType: null
        };
      }
    },
    isShowPersonal: {
      type: Boolean,
      default: false
    },
    isShowCompany: {
      type: Boolean,
      default: false
    },
    supplierId: {
      type: Number,
      default: null
    },
    parentSupplierId: {
      type: Number,
      default: null
    },
    showMobilePage: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    paramsObj() {
      const { type } = this.$route.query;
      return {
        type: 0,
        fieldType: this.formData.supplierType ? 4 : 3,
        channelId: type ? this.parentSupplierId : this.supplierId
      };
    }
  },
  methods: {
    cooperationStatus,
    setSensitive() {
      if (!this.formData.supplierType) {
        this.$emit('setSensitive', 'isShowPersonal');
      } else {
        this.$emit('setSensitive', 'isShowCompany');
      }
    },
    getFormatText(data) {
      if (!data) return '****';
      if (data.length <= 3) {
        return `${data}****`;
      } else if (data.length > 3 && data.length < 11) {
        return `${data.slice(0, 3)}****`;
      } else if (data.length >= 11) {
        return `${data.slice(0, 3)}****${data.slice(data.length - 4)}`;
      }
    },
    handleDownload(data) {
      this.$emit('download', data);
    }
  }
};
</script>

<style lang="scss" scoped>
.other-info-form {
  padding: 0px 24px 18px 24px;
  .form-content {
    flex-wrap: wrap;
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
      height: 100%;
    }
    .el-form-item__label {
      color: #999999;
    }
    .el-col {
      .el-form-item {
        border-right: 1px solid #eee;
      }
    }
    .el-col:nth-child(3n + 3),
    .el-col:last-child {
      .el-form-item {
        border-right: none;
      }
    }
  }
}
</style>
